<!-- 柱状图配置 -->
<template>
  <div>
    <el-form-item label="竖展示">
      <avue-switch type="textarea"
                   v-model="main.activeOption.category"></avue-switch>
    </el-form-item>
    <el-collapse accordion>
      <el-collapse-item title="柱体设置">
        <el-form-item label="最大宽度">
          <avue-slider v-model="main.activeOption.barWidth">
          </avue-slider>
        </el-form-item>
        <el-form-item label="圆角">
          <avue-slider v-model="main.activeOption.barRadius">
          </avue-slider>
        </el-form-item>
        <el-form-item label="最小高度">
          <avue-slider v-model="main.activeOption.barMinHeight">
          </avue-slider>
        </el-form-item>
        <el-form-item label="描边颜色">
          <avue-input-color v-model="main.activeOption.borderColor"></avue-input-color>
        </el-form-item>
        <el-form-item label="描边宽度">
          <avue-slider v-model="main.activeOption.borderWidth" :max="10">
          </avue-slider>
        </el-form-item>
        <el-form-item label="描边类型">
          <avue-select v-model="main.activeOption.borderType"
                       :dic="borderType">
          </avue-select>
        </el-form-item>
        <el-form-item label="阴影颜色">
          <avue-input-color v-model="main.activeOption.shadowColor"></avue-input-color>
        </el-form-item>
        <el-form-item label="阴影模糊大小">
          <avue-slider v-model="main.activeOption.shadowBlur">
          </avue-slider>
        </el-form-item>
        <el-form-item label="阴影x偏移">
          <avue-slider v-model="main.activeOption.shadowOffsetX" :min="-50" :max="50">
          </avue-slider>
        </el-form-item>
        <el-form-item label="阴影y偏移">
          <avue-slider v-model="main.activeOption.shadowOffsetY" :min="-20" :max="20">
          </avue-slider>
        </el-form-item>
        <el-form-item label="透明度">
          <avue-slider v-model="main.activeOption.itemStyleOpacity" :max="1" :step="0.05" >
          </avue-slider>
        </el-form-item>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  inject: ["main"],
  data(){
    return{
      borderType:[{ label: '实线', value: 'solid' }, { label: '虚线', value: 'dashed' }, { label: '破折线', value: 'dotted' }]
    }
  }
}
</script>

<style>
</style>